<template>
  <Common>
    <template v-slot:top>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        size="medium "
      >
        <el-form-item label="线缆类型:">
          <el-cascader
            :props="props"
            v-model="value"
            :options="cableDate"
            @change="handleChange"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="">
          <el-input
            oninput="value=value.replace(/[^\d.]/g,'')"
            placeholder="请输入"
            v-model="form.real"
            @input="inputChange"
            class="input-with-select"
          >
            <el-select
              v-model="selectUnit"
              slot="prepend"
              placeholder="请选择"
              style="width: 104px"
            >
              <el-option label="实际重量" value="1"></el-option>
              <el-option label="实际长度" value="2"></el-option>
            </el-select>
            <template slot="append">{{ weightUnit2 }}</template>
          </el-input>
        </el-form-item>

        <el-form-item :label="title">
          <el-input
            disabled
            :placeholder="title"
            v-model="form.estimatedLength"
          >
            <template slot="append">{{ lengthUnit2 }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="参考范围:">
          <el-input disabled placeholder="参考范围" v-model="gaps">
            <template slot="append">{{ lengthUnit2 }}</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="weatherFlag"
            style="margin-left: 20px"
            size="medium"
            border
            >雨雪天气</el-checkbox
          ></el-form-item
        >
        <!-- <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="add"
            >添加到称重记录</el-button
          >
        </el-form-item> -->
      </el-form>
    </template>
    <template v-slot:table>
      <el-table
        :data="tableData"
        v-loading="loading"
        height="90%"
        border
        style="width: 100%"
      >
        <el-table-column prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="cableClass" label="线缆类型"> </el-table-column>
        <el-table-column prop="cableModel" label="规格型号"> </el-table-column>
        <el-table-column prop="weight" label="重量"> </el-table-column>
        <el-table-column prop="measuringLength" label="测量长度">
        </el-table-column>
        <el-table-column prop="estimatedLength" label="估算长度">
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间"> </el-table-column>
      </el-table>
    </template>
    <template v-slot:pagination>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <AddWeight ref="addEdit" @getTable="getTable"></AddWeight>
    </template>
  </Common>
</template>

<script>
import Common from "@/components/common.vue";
import AddWeight from "./addWeight.vue";
import {
  getWeight,
  getClassPullDown,
  getModelByclass,
  getSelectInfo,
  getUnitConversion,
} from "@/common/api";

export default {
  name: "WeightIn",
  props: {},
  components: { Common, AddWeight },
  data() {
    return {
      form: {
        real: "",
        estimatedLength: "",
      },
      selectUnit: "1",
      weatherFlag: false, //雨雪
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      props: {
        expandTrigger: "hover",
        lazy: true,
        lazyLoad: async (node, resolve) => {
          const { level, value } = node;
          let data = await this.getModelByclass(value, level);
          resolve(data);
        },
      },
      value: [],
      cableDate: [],
      lengthUnit: "",
      weightUnit: "",
      timer: null,
      gaps: "", //参考范围
    };
  },
  computed: {
    lengthUnit2() {
      return this.selectUnit == "1" ? this.lengthUnit : this.weightUnit;
    },
    weightUnit2() {
      return this.selectUnit == "1" ? this.weightUnit : this.lengthUnit;
    },
    title() {
      return this.selectUnit == "1" ? "估算长度：" : "估算重量：";
    },
  },
  watch: {
    selectUnit(newV) {
      this.gaps = "";
      this.form = {
        real: "",
        estimatedLength: "",
      };
    },
    weatherFlag(newV) {
      this.inputChange();
    },
  },
  mounted() {},
  created() {
    this.getTable();
    this.getClassPullDown();
  },
  methods: {
    getModelByclass(value, level) {
      if (level >= 2) return;
      return new Promise((resolve, reject) => {
        getModelByclass({ cableClass: value }).then((res) => {
          if (res.success) {
            let arr = res.data.map((i) => {
              return {
                label: i,
                value: i,
                leaf: level >= 1,
              };
            });
            resolve(arr);
          } else {
            resolve([]);
          }
        });
      });
    },
    getClassPullDown() {
      getClassPullDown().then((res) => {
        if (res.success) {
          this.cableDate = res.data.map((i) => {
            return {
              label: i,
              value: i,
            };
          });
        } else {
          this.$errorMsg(res.message);
        }
      });
    },
    async handleChange(e) {
      this.pageNum = 1;
      this.getTable();
      let arr = Object.keys(this.form);
      arr.forEach((i) => (this.form[i] = ""));
      this.lengthUnit = "";
      this.weightUnit = "";
      if (!this.value.length) return;

      let obj = await this.getSelectInfo(e);
      this.lengthUnit = obj.lengthUnit;
      this.weightUnit = obj.weightUnit;
    },
    getSelectInfo(e) {
      return new Promise((resolve, reject) => {
        getSelectInfo({ cableClass: e[0], cableModel: e[1] }).then((res) => {
          if (res.success) {
            resolve(res.data);
          } else {
            this.$errorMsg(res.message);
            resolve({});
          }
        });
      });
    },
    inputChange(e) {
      if (!this.form.real) return;
      // if (!this.value[0] || !this.value[1]) {
      //   return;
      // }
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.timer = setTimeout(() => {
        let param = {
          cableClass: this.value[0],
          cableModel: this.value[1],
          real: this.form.real,
          typeFlag: this.selectUnit == "1" ? "weight" : "length",
          weatherFlag: this.weatherFlag,
        };
        getUnitConversion(param).then((res) => {
          if (res.success) {
            this.form.estimatedLength = res.data.estimatedLength;
            this.gaps = `${res.data.minUnit} ~ ${res.data.maxUnit}`;
          } else {
            this.$errorMsg(res.message);
          }
        });
      }, 1000);
    },

    handleSizeChange(e) {
      this.pageSize = e;
      this.getTable();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTable();
    },
    selectData() {
      this.pageNum = 1;
      this.getTable();
    },
    getTable() {
      let param = {
        // ...this.form,
        cableClass: this.value[0],
        cableModel: this.value[1],
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.loading = true;
      getWeight(param)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.tableData.forEach((i, index) => {
              i.index = (this.pageNum - 1) * this.pageSize + index + 1;
            });
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    add() {
      this.$refs.addEdit.dialogFormVisible = true;
      this.$refs.addEdit.type = "add";
    },
  },
};
</script>


<style lang="scss" scoped>
</style>